<template>
	<view class="login-container">
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<!-- <button type="primary" class="btn-login"  @click="getuserNew" >一键登录</button> -->
		<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">唤起授权手机号</button> -->
		<!-- <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">选择头像</button> -->
    <!-- <view class="nickname" style="display: flex;flex-direction: row;margin-top: 20rpx;">
            <text class="weui-text">昵称：</text>
            <input type="nickname" class="weui-input" 
            :value="nickName" @blur="bindblur" placeholder="请输入昵称"
                @input="bindinput" />
     </view> -->
			<!-- <input type="nickname" v-model="" /> -->
		<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
		<text class="tips-text">登录后尽享更多权益</text>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
import showMsg from '../../common/ShowMsg';
	export default {
		name:"my-login",
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('m_user',['redirectInfo'])
		},
		methods: {
			...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),
			//获取用户的基本信息，用户授权之后
			getUserInfo(e)
			{
				
				this.updateUserInfo(e.detail.userInfo)
				this.getToken(e.detail)
	
			},
		  async	getToken(info)
			{
					//获取code对应 的值 
				const res = await uni.login().catch(err=>err)
				if(!res||res.errMsg !=='login:ok')
				{
					return showMsg('登录失败！')
				}
		
				//准备参数
				const query ={
					code:res.code,
					encryptedData:info.encryptedData,
					iv:info.iv,
					rawData:info.rawData,
					signature:info.signature
				}
				console.log(query)
				// console.log(info)
				
				const {data: loginResutl} = await uni.request({
				      method:"post",
				      url:'https://www.uinav.com/api/public/v1/users/wxlogin',
				      data:query
				    })
						console.info(loginResutl.meta.status);
						 //请求失败  
						 // if(loginResutl.meta.status!== 200)
						 // {
							//  console.info(loginResutl);
							//  return	 showMsg('登录失败！')
						 // }	
					
				 //因为登录报错，所以暂时写死
				 // this.updateToken(loginResutl.message.token)
				 this.updateToken('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxNjUwODY0MDA2MTEzMDE1MSIsImlhdCI6IjE2NTA2MTYyODQiLCJuYmYiOiIxNjUwNjE2Mjg0IiwiZXhwIjoiMTY1MDYxNzI4NCIsImlzcyI6IlpaVCIsImF1ZCI6Ik5vYm9keSJ9.bFTqk77wIdhyciMmetiU3zy8CnKZZg-9G7r64vcVHa8')
				 
					// showMsg('登录成功！')
			// const {data : loginResutl} = await uni.$http.post('https://www.uinav.com/api/public/v1/users/wxlogin', query);
			// if(loginResutl.meta.status !== 200)
			// {
			// 	return showMsg('登录失败！')
			// }
			// showMsg('登录成功！')
       
			 // 登录成功 跳转回去
			 this.navigateBack()
			
			},
			navigateBack(){
				console.info(this.redirectInfo)
				if(this.redirectInfo&&this.redirectInfo.openType==='switchTab')
				{
		
					uni.switchTab({
						url:this.redirectInfo.from,
						// 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
						complete: () => {
							this.updateRedirectInfo(null)
						}
					})
				}
			},
			// chooseAvatar(e)
			// {
			// 	console.info(e)		
			// },
			//昵称输入框blur
					bindblur(e) {
							 // console.log('nickName', e)
							 this.nickName = e.detail.value;
					 },
					//昵称输入框input
					 bindinput(e) {
							 // console.log('nickName', e)
							 this.nickName = e.detail.value;
					 },
					//选择头像
					 // onChooseavatar(e) {
					 //    console.log(e.detail);
					 //     this.avatarUrl = e.detail.avatarUrl;
					 // },
			// 获取用户手机号
				getPhoneNumber(e){
					// getPhoneNumber:fail no permission 说明没有开通权限，需要企业账号。
					console.log(e.detail.errMsg)                                            // 判断用户是否允许获取手机号
					console.log(e.detail.iv)                                                    // 参数 iv
					console.log(e.detail.encryptedData)                               // 参数encryptedData
					if(e.detail.errMsg == "getPhoneNumber:ok"){                // 用户允许或去手机号
							console.log('来了，老弟')    
					}
				},
						

	 // 获取 openid unionid
			getuserNew(){
						uni.login({
							provider: 'weixin',
							success:res=>{
										// console.log(res.code);  
										 uni.request({  
											url: 'https://api.weixin.qq.com/sns/jscode2session',  
												method:'GET',  
												data: {  
													appid: 'wxb7f97dd94793cb5e',                         //你的小程序的APPID  
													secret: '31cbb0f3cc0af4ac4aeb515bd3e856f0',                 //你的小程序的secret,  
													js_code:res.code,                                 //wx.login 登录成功后的code  
													grant_type: 'authorization_code',
												},  
												success: (cts) => {  
													// 换取成功后 暂存这些数据 留作后续操作  
													this.openId=cts.data.openid               //openid 用户唯一标识  
													this.unionid=cts.data.unionid             //unionid 开放平台唯一标识   当公众号和小程序同时登录过才会有
													this.session_key=cts.data.session_key     //session_key  会话密钥  
													console.log(cts)
													console.log(this.openId,this.session_key)
												}  
											}); 
									
										}
						});
			 },
			 // 弹出授权并获取 经纬度
			async GetAddressCoordinate(e)
			{				
				  let that = this
				        // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				        uni.getSetting({
				          success (res) {
				            console.log(res)
				  
				            // 如果没有授权
				            if (!res.authSetting['scope.userLocation']) {
				              // 则拉起授权窗口
				              uni.authorize({
				                scope: 'scope.userLocation',
				                success () {
													console.info('成功')
				                  //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
				                  uni.getLocation({
				                    type: 'wgs84',
				                    success: function (res) {
				                      that.x = res.longitude
				                      that.y = res.latitude
				                      console.log(res)
				                      console.log('当前位置的经度：' + res.longitude)
				                      console.log('当前位置的纬度：' + res.latitude)
				                      uni.showToast({
				                        title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
				                        icon: 'success',
				                        mask: true
				                      })
				                    }, fail (error) {
				                      console.log('失败', error)
				                    }
				                  })
				                },
				                fail (error) {
				                  //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
				                  console.log('拒绝授权', error)
				  
				                  uni.showModal({
				                    title: '提示',
				                    content: '若点击不授权，将无法使用位置功能',
				                    cancelText: '不授权',
				                    cancelColor: '#999',
				                    confirmText: '授权',
				                    confirmColor: '#f94218',
				                    success (res) {
				                      console.log(res)
				                      if (res.confirm) {
				                        // 选择弹框内授权
				                        uni.openSetting({
				                          success (res) {
				                            console.log(res.authSetting)
				                          }
				                        })
				                      } else if (res.cancel) {
				                        // 选择弹框内 不授权
				                        console.log('用户点击不授权')
				                      }
				                    }
				                  })
				                }
				              })
				            } else {
											
				              // 有权限则直接获取
				              uni.getLocation({
				                type: 'wgs84',
				                success: function (res) {
				                  that.x = res.longitude
				                  that.y = res.latitude
				                  console.log(res)
				                  console.log('当前位置的经度：' + res.longitude)
				                  console.log('当前位置的纬度：' + res.latitude)
				                  uni.showToast({
				                    title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
				                    icon: 'success',
				                    mask: true
				                  })
				                }, fail (error) {
				                  uni.showToast({
				                    title: '请勿频繁调用！',
				                    icon: 'none',
				                  })
				                  console.log('失败', error)
				                }
				              })
				            }
				          }
				        })
			},
			
			//获取 当前位置的经度 经度
			 getLocation () {
				      let that = this
				      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				      uni.getSetting({
				        success (res) {
				          console.log(res)
				
				          // 如果没有授权
				          if (!res.authSetting['scope.userLocation']) {
				            // 则拉起授权窗口
				            uni.authorize({
				              scope: 'scope.userLocation',
				              success () {
				                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
				                uni.getLocation({
				                  type: 'wgs84',
				                  success: function (res) {
				                    that.x = res.longitude
				                    that.y = res.latitude
				                    console.log(res)
				                    console.log('当前位置的经度：' + res.longitude)
				                    console.log('当前位置的纬度：' + res.latitude)
				                    uni.showToast({
				                      title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
				                      icon: 'success',
				                      mask: true
				                    })
				                  }, fail (error) {
				                    console.log('失败', error)
				                  }
				                })
				              },
				              fail (error) {
				                //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
				                console.log('拒绝授权', error)
				
				                uni.showModal({
				                  title: '提示',
				                  content: '若点击不授权，将无法使用位置功能',
				                  cancelText: '不授权',
				                  cancelColor: '#999',
				                  confirmText: '授权',
				                  confirmColor: '#f94218',
				                  success (res) {
				                    console.log(res)
				                    if (res.confirm) {
				                      // 选择弹框内授权
				                      uni.openSetting({
				                        success (res) {
				                          console.log(res.authSetting)
				                        }
				                      })
				                    } else if (res.cancel) {
				                      // 选择弹框内 不授权
				                      console.log('用户点击不授权')
				                    }
				                  }
				                })
				              }
				            })
				          } else {
				            // 有权限则直接获取
				            uni.getLocation({
				              type: 'wgs84',
				              success: function (res) {
				                that.x = res.longitude
				                that.y = res.latitude
				                console.log(res)
				                console.log('当前位置的经度：' + res.longitude)
				                console.log('当前位置的纬度：' + res.latitude)
				                uni.showToast({
				                  title: '当前位置的经纬度：' + res.longitude + ',' + res.latitude,
				                  icon: 'success',
				                  mask: true
				                })
				              }, fail (error) {
				                uni.showToast({
				                  title: '请勿频繁调用！',
				                  icon: 'none',
				                })
				                console.log('失败', error)
				              }
				            })
				          }
				        }
				      })
				 // const univerifyManager = uni.getLocation()
				 // console.info(univerifyManager)
			}
		}
	}
</script>

<style lang="scss">
	
	.login-container{
		height: 750rpx;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		//子绝父相：父元素或祖先元素是相对定位，子元素是绝对定位
		// 绝对定位：看父元素，也就是看最近一级父元素是否设定了定位，如果没有就往上找，如果一直都没有，那么就会以浏览器的可视窗口作为参照进行偏移
		// 相对定位：是以自己为参照为，偏移量是看自己原来的位置作为偏移参照的
		position: relative;
		//超出隐藏
		overflow: hidden;
		
		 //伪元素 绘制登录盒子底部的半椭圆造型 在父元素的最底部
		&::after{
			content: ' ';
			display: block;
			width: 100%;
			height: 40px;
			background-color: #F5F5F5;//**** 改变此处可以更清楚的看出效果
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius :100%;  //圆孤度
			transform:translateY(50%)//全部向下移动50%,也就是只留一半，因为父元素超出隐藏 ，所以移出的那一半会隐藏
		}
		
		.btn-login{
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #c00000;
		}
		.tips-text{
			font-size: 12px;
			color: gray;
		}
	}
	
	
</style>